<template>
  <div id="app">
<!--    <homeinterest></homeinterest>-->
<!--    <search></search>-->
<!--    <searchactivity></searchactivity>-->
<!--    <searchuser></searchuser>-->
<!--    <searchpost></searchpost>-->
<!--    <searchgroup><searchgroup>-->
<!--    <searchgallery></searchgallery>-->
<!--    <allactivities></allactivities>-->
<!--    <onekind></onekind>-->
<!--    <onlinewatch></onlinewatch>-->
<!--    <onlineconpetition></onlineconpetition>-->
<!--    <onlinecompetitionworks></onlinecompetitionworks>-->
<!--    <workcontent></workcontent>-->


<!--参赛作品-->
    <div class="home-background">
      <!--        头部-->
      <div class="header">
        <navbar class="home-nav">
          <div slot="left">
            <i class="el-icon-arrow-left back"></i>
          </div>
          <div slot="center">
            <el-button type="text" class="text"></el-button>
          </div>
          <div slot="right">
            <i class="el-icon-share top-icon"></i>
          </div>
        </navbar>
      </div>
      <div style="width: 100%;height: 49px"></div>
      <div class="submit">
        <div class="work-pic">
          <p>上传参赛作品</p>
          <div class="work-pic-upload">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <p>作品描述</p>
          <div>
            <el-input
              class="work-describe"
              type="textarea"
              placeholder="说点什么"
              v-model="textarea"
              maxlength="30"
              show-word-limit>
            </el-input>
          </div>
          <p>参赛须知</p>
          <p style="margin-top: 0px;margin-bottom: 0px">1.任何参赛作品都不能涉及引战，政治敏感，违法话题等信息。</p>
          <p style="margin-top: 0px;margin-bottom: 0px">2.作品的提交需要进行审核，这个过程可能需要一天的时间。</p>
          <p style="margin-top: 0px;margin-bottom: 0px">3.每个选手最多只能提交一个作品照片，绘画类，摄影类，书法类只能提交一张作品正面照，雕塑类可以提交作品多个角度照片。</p>
          <p style="margin-top: 0px;margin-bottom: 0px">4.参赛作品不可以抄袭他人，如有发现，立即取消参赛资格，并且将依法进行追究。</p>
        </div>
      </div>
      </div>

<!--&lt;!&ndash;      <div class="competition-works">&ndash;&gt;-->
<!--&lt;!&ndash;        <div>&ndash;&gt;-->
<!--&lt;!&ndash;          <h3 class="title1">最新</h3>&ndash;&gt;-->
<!--&lt;!&ndash;          <h3 class="title2">最热</h3>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--&lt;!&ndash;        <div class="works">&ndash;&gt;-->
<!--&lt;!&ndash;          <onlinecomwork></onlinecomwork>&ndash;&gt;-->
<!--&lt;!&ndash;          <onlinecomwork></onlinecomwork>&ndash;&gt;-->
<!--&lt;!&ndash;          <onlinecomwork></onlinecomwork>&ndash;&gt;-->
<!--&lt;!&ndash;          <div style="width: 100%;height: 20px"></div>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--    </div>-->



<!--      <div class="select">-->
<!--        <el-date-picker class="select-time"-->
<!--          v-model="value1"-->
<!--          type="date"-->
<!--          placeholder="选择日期">-->
<!--        </el-date-picker>-->
<!--        <el-select v-model="value" placeholder="请选择" class="select-distance">-->
<!--          <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </div>-->
<!--        活动-->
<!--      <div class="all-act">-->
<!--        <h3>-->
<!--          <el-button type="text" class="act-choose">最新</el-button>-->
<!--          <el-button type="text" class="act-choose">最热</el-button>-->
<!--        </h3>-->
<!--        <searchact></searchact>-->
<!--        <searchact></searchact>-->
<!--        <searchact></searchact>-->
<!--        <searchact></searchact>-->
<!--        <searchact></searchact>-->
<!--        <searchact></searchact>-->
<!--        <searchact></searchact>-->
<!--      </div>-->
<!--    </div>-->




  </div>
</template>

<script>
import tabbar from "./components/tabbar/tabbar";
import tabbarItem from "./components/tabbar/tabberItem";
import navbar from "./components/nav-bar/nav-bar";
import interestcard from "./components/home-interest-card/home-interest-card";
import homeinterest from "./views/home/interest/home-interest";
import search from "./views/home/search/search";
import searchact from "./components/search/search-act";
import searchactivity from "./views/home/search/search-act";
import searchuser from "./views/home/search/search-user";
import searchpost from "./views/home/search/search-post";
import searchgroup from "./views/home/search/search-group";
import searchgallery from "./views/home/search/search-gallery";
import allactivities from "./views/activities/all-activities/all-activities";
import onekind from "./views/activities/one-kind/one-kind";
import onlinewatch from "./views/activities/online-watch/online-watch"
import onlineconpetition from "./views/activities/online-competition/online-competition"
import onlinecomwork from "./components/online-com-work-card/online-com-work-card"
import onlinecompetitionworks from "./views/activities/online-competition/online-competition-works"
import workcontent from "./views/activities/online-competition/work-content"

export default {
  name: 'App',
  data(){
    return{
      drawer:false,
      direction:'btt',
      imageUrl: '',
      text: '',
      textarea: ''
    };
  },
  components: {
    tabbar,
    tabbarItem,
    navbar,
    interestcard,
    homeinterest,
    search,
    searchact,
    searchactivity,
    searchuser,
    searchpost,
    searchgroup,
    searchgallery,
    allactivities,
    onekind,
    onlinewatch,
    onlineconpetition,
    onlinecomwork,
    onlinecompetitionworks,
    workcontent
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}

</script>

<style>
  #app{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
  .home-background{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #F2F2F2;
  }
  .header{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
  }
  .home-nav{
    background-color: #B0E3FF;
    color: white;
    box-shadow: transparent;
    border: transparent;
  }
  .back{
    color: white;
    font-size: 25px;
    margin-top: 10px;
  }
  .text{
    color: white;
    font-size: 20px;
    margin-top: 2px;
  }
  .top-icon{
    color: white;
    font-size: 26px;
    margin-right: 5px;
    margin-top: 10px;
  }
  .submit{
    width: 100%;
    height: 100%;
    background-color: white;
  }
  .work-pic p{
    margin-top: 0px;
    padding-top: 20px;
    padding-left: 20px;
    color: #7f7f7f;
  }
  .work-pic-upload{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #B0E3FF;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #B0E3FF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #B0E3FF;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .work-describe{
    width: 400px;
    margin: 20px 0 20px 0;
    padding: 0px;
  }



  /*.select{*/
  /*  width: 100%;*/
  /*  height: 60px;*/
  /*  background-color: white;*/
  /*}*/
  /*.select-time{*/
  /*  display: inline-block;*/
  /*  margin-top: 10px;*/
  /*  margin-left: 10px;*/
  /*  width: 40%;*/
  /*}*/
  /*.select-distance{*/
  /*  display: inline-block;*/
  /*  margin-top: 10px;*/
  /*  margin-right: 10px;*/
  /*  width: 40%;*/
  /*}*/

  /*.all-act{*/
  /*  width: 100%;*/
  /*  height: auto;*/
  /*  background-color: white;*/
  /*}*/
  /*.all-act h3{*/
  /*  margin-top: 0px;*/
  /*  margin-bottom: 0px;*/
  /*}*/
  /*.act-choose{*/
  /*  color: #555555;*/
  /*  font-size: 20px;*/
  /*  font-weight: bold;*/
  /*  margin-top: 15px;*/
  /*  margin-left: 12px;*/
  /*}*/



</style>
